﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="mobileoptimized" content="800" />
    <meta name="viewport" content="user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap Accelerometer Demo</title>
    <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b2.css" />
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0b2.js"></script>
    <script type="text/javascript" src="phonegap.js"></script>
	<script type="text/javascript" charset="utf-8">

	    var ballSize = 52;
	    var fieldSize = 295;
	    var rad = 25;
	    var top = 55;
	    var bottom = 445;
	    var left = 10;
	    var right = 310;

	    var y = fieldSize / 2;
	    var x = fieldSize / 2;
	    var vx = 0;
	    var vy = 0;
	    var vLimit = 9.8;

	    var min = rad;
	    var max = fieldSize - rad;

	    var multiplier = 1.5;

	    var ball;

	    var watchAccel = function () {
	        var suc = function (a) {

	            vx += a.x * multiplier;
	            vy -= a.y * multiplier;

	            if (vx > vLimit) vx = vLimit;
	            if (vy > vLimit) vy = vLimit;

	            x += vx;
	            y += vy;

	            if (y > max) { y = max; vy = 0; }
	            if (y < min) { y = min; vy = 0; }
	            if (x > max) { x = max; vx = 0; }
	            if (x < min) { x = min; vx = 0; }

	            updateBallCordinates();
	        };
	        var fail = function () { };
	        var opt = {};
	        opt.frequency = 50;
	        timer = navigator.accelerometer.watchAcceleration(suc, fail, opt);
	    }

	    function roundNumber(num) {
	        var dec = 3;
	        var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
	        return result;
	    }

	    var preventBehavior = function (e) {
	        e.preventDefault();
	    };

	    function updateBallCordinates() {
	        ball.style.left = (left + x - ballSize / 2).toString() + 'px';
	        ball.style.top = (top + y - ballSize / 2).toString() + 'px';
	    }

	    function init() {
	        document.addEventListener("touchmove", preventBehavior, false);
	        ball = document.getElementById('ball');
	        updateBallCordinates();
	    }
		
	  </script>
    <style>
	    body {
		    color: #fff;
		    background: #bbb;
	    }
	
	    #container {
		    margin: 10px;
		    border:  #666 0px solid;
		    width: 295px;
		    height:295px;
	        border-radius: 10px;
		    background:#fff;
	    }

	    #ball {
		    width: 52px;
		    height: 52px;
		    background: url('images/ball.png');
		    position:absolute;
	    }
	
    </style>
  </head>
  <body onload="init();" id="stage" >
	<div data-role="header" data-position="inline" data-theme="c">
            <a href="index.html" data-icon="home" >Home</a>
            <h2>Accelerometer Demo</h2>
            <a href="javascript:watchAccel();" data-icon="arrow-r" >Start</a>
    </div>
	<!--<div data-role="content">-->
	<div id="container">
		<div id="ball"  ></div>
	</div>
	<!--</div>-->
  </body>
</html>